iT邦幫忙

2021 iThome 鐵人賽

DAY 6
0
Modern Web

自動化 End-End 測試 Nightwatch.js系列 第 6

自動化 End-End 測試 Nightwatch.js 之踩雷筆記:點擊物件

  • 分享至 

  • xImage
  •  

點擊特定物件是 E2E 中很常會做到的事,如果本身物件有設定好特定的 ID, Class 或 Attribute,只要使用 Nightwatch 中提供的 click() 就可以了

.click() 這個指令是透過模擬點擊 DOM element,且具備 scroll into view 的功能,也就是能夠自動滾動至該物件。此外也能判斷 DOM 是否能被點擊。
使用方法也很簡單:

.click(selector, [callback])
.click(using, selector, [callback])

selector 為 DOM 的選擇器,using 則可以是 Css 或 Xpath,最後也有 callback function 可以使用。

Safaridriver

在撰寫前端時,為了使 SEO 更好,時常會有將 <button> 改為 <div> 的做法。而這在 E2E 並使用 Safari 時就不是這麼方便的選擇。
這個問題源自於 Safaridriver 對於可點擊物件的判斷。不過這篇不會細探,只會提供方法XD

clickDiv()

既然模擬 DOM 點不到,那就用 Javascript 去點吧!

document.querySelector(selector).click();

很簡單吧!
但只有 Css selecot 還是不夠的,雖然物件可以透過預先加入 ID, Class 或 Attribute,但如果每個都加可能會變得很麻煩。因此可以利用 Xpath:

  • text() 是用來尋找並定位特定的文字位置
  • starts-with 匹配一個屬性開始位置的關鍵字
  • contains 匹配一個屬性值中包含的字串

舉例來說,可以像是這樣使用:

//input[text()='搜尋文字'] 

而點擊 Xpath 的方法也很簡單:

document
  .evaluate(
    selector,
    document,
    null,
    XPathResult.FIRST_ORDERED_NODE_TYPE,
    null,
  )
  .singleNodeValue.click();

有了 Css/Xpath 的點擊方法後,就可以修改我們的 clickDiv() 了:

exports.command = function(using, selector, callback) {
  callback = callback || function() {};
  using = using || 'css';
  if (using === 'css') {
    this.execute(
      function(selector) {
        document.querySelector(selector).click();
      },
      [selector],
      function(result) {
        callback.call(this, result);
      },
    );
  } else {
    this.execute(
      function(selector) {
        document
          .evaluate(
            selector,
            document,
            null,
            XPathResult.FIRST_ORDERED_NODE_TYPE,
            null,
          )
          .singleNodeValue.click();
      },
      [selector],
      function(result) {
        callback.call(this, result);
      },
    );
  }

  return this;
};

然而,點擊物件這件事還沒結束,明天還有另外一篇,繼續說說我在處理點擊遇到的其他雷點QQ


上一篇
自動化 End-End 測試 Nightwatch.js 之踩雷筆記:選取文字
下一篇
自動化 End-End 測試 Nightwatch.js 之踩雷筆記:點擊物件 II
系列文
自動化 End-End 測試 Nightwatch.js30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言